<!-- 购物车栏+购物车弹窗 -->
<template>
    <view class="carPage">
        <view v-if="!buyCarList.length" class="noListImg">
            <u--image src="/static/img/car_nolist.png" width="160rpx" height="160rpx" mode="aspectFill" />
        </view>
        <checkout v-else :showList.sync="showList" :buyCarList="buyCarList"/>
        
        <!-- 购物车列表 -->
        <u-popup :show="showList" mode="bottom" @close="showList = false">
            <view class="popupBox">
                <view class="topBox">
                    <u-checkbox-group
                        placement="column"
                        @change="checkChange"
                    >
                        <u-checkbox :label="'已选购商品(' + checkedNum + '件)'" :name="0" activeColor="#9F07B7" shape="circle"/>
                    </u-checkbox-group>
                    <view class="clearCar" @tap="clearAll">
                        <u-icon name="trash" color="#666666" size="30rpx"></u-icon>
                        清空购物车
                    </view>
                </view>
                <!-- 列表 -->
                <scroll-view
                    class="listBox"
                    scroll-y
                >
                    <u-checkbox-group
                        placement="column"
                        @change="checkChange"
                    >
                        <productCardCar
                            v-for="(item,index) in buyCarList"
                            :key="index"
                            :item="item"
                            @numChange="numChange"
                        />
                    </u-checkbox-group>
                </scroll-view>
                <!-- 结算栏 -->
                <checkout :showList.sync="showList" :buyCarList="buyCarList"/>
            </view>
        </u-popup>
    </view>
</template>

<script>
    import { checkout } from "@/pages/timelyDelivery/components/checkout.vue"
    import { productCardCar } from "@/components/productCardCar.vue"
    export default {
        components: {
            checkout,
            productCardCar
        },
        props: {
            buyCarList: Array
        },
        data() {
            return {
                showList: false
            };
        },
        computed: {
            checkedNum() {
                let num = 0
                this.buyCarList.filter(i => i.checked).map(j => {
                    num += j.cartNum
                })
                return num
            }
        },
        watch: {
            buyCarList: {
                handler() {
                    if (!this.buyCarList.filter(i => i.cartNum).length) {
                        this.showList = false
                    }
                },
                deep: true
            }
        },
        methods: {
            checkChange(item) {
                if (item[0] === 0) {
                    this.$emit('checkChange', this.buyCarList.map(i => i.id))
                } else if (item[0] === undefined) {
                    this.$emit('checkChange', [])
                } else{
                    this.$emit('checkChange', item)
                }
            },
            numChange(e) {
                this.$emit('numChange', e)
            },
            clearAll() {
                this.$emit('clearAll')
            }
        }
    };
</script>
<style scoped lang="scss">
    .carPage {
        padding: 0 30rpx;
        position: fixed;
        bottom: 50rpx;
        right: 0;
        width: 100%;
        height: 128rpx;
        
        .noListImg {
            position: absolute;
            right: 0;
        }
        .popupBox {
            padding: 40rpx 30rpx;
            .topBox {
                display: flex;
                align-items: center;
                justify-content: space-between;
                .clearCar {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                }
            }
            .listBox {
                max-height: 500rpx;
                margin: 20rpx 0;
            }
        }
    }
</style>